<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>验证后台</title>
<link rel="stylesheet" href="__HOME__/css/public_style.css">
<style>
	body{background:url(__HOME__/img/yanzheng_bg.jpg) no-repeat fixed;background-size:cover;}
	::-webkit-input-placeholder {color:rgba(255,255,255,.6);} /* WebKit, Blink, Edge */
	:-moz-placeholder {color:rgba(255,255,255,.6);} /* Mozilla Firefox 4 to 18 */
	::-moz-placeholder {color:rgba(255,255,255,.6);} /* Mozilla Firefox 19+ */
	:-ms-input-placeholder {color:rgba(255,255,255,.6);} /* Internet Explorer 10-11 */

	.content_box{position:fixed;height:416px;width:280px;top:calc(50% - 208px);left:calc(50% - 140px);}
	.content_box>ul>li{height:40px;position:relative;}
	.content_box>ul>li>input{
		display:block;border:1px solid #ddd;border-radius:12px;height:38px;width:calc(100% - 2px);color:#333;
		line-height:38px;background-color:rgba(255,255,255,0);text-indent:16px;transition:.2s;outline:none;
	}
	.content_box>ul>li>input:hover{background-color:rgba(255,255,255,.2);}
	.content_box>ul>li>button{
		display:block;;background-color:#cebbbb;border:none;height:40px;line-height:40px;width:100px;border-radius:5px;color:#fff;text-align:center;margin:0 auto;
	}
	/*-- 查询手机号码 --*/
	.sj_chaxun>div:nth-of-type(1){position:absolute;width:36px;height:40px;background:url(__HOME__/img/shouji.png) no-repeat;background-size:36px 40px;top:0;left:0;}
	.sj_chaxun>.cha_xun{position:absolute;padding:0 14px;margin:5px 0;border-left:1px solid #ddd;right:0;top:0;height:30px;line-height:30px;color:#fff;}
	.sj_chaxun>input{text-indent:36px!important;}
	/*-- 查询手机号码 --*/
	/*-- 累计消费 --*/
	.leiji_xf{height:220px!important;margin:10px 0;}
	.leiji_xf>img{width:100%;}
	.leiji_xf>p{position:absolute;width:100%;left:0;text-align:center;}
	.leiji_xf>p:nth-of-type(1){color:#bababb;font-size:24px;font-weight:bold;top:40px;}
	.leiji_xf>p:nth-of-type(2){color:#5c65ad;font-size:30px;font-weight:bold;top:90px;text-indent:-10px;}
	/*-- 累计消费 --*/
	/*-- 验证码 --*/
	.yanzheng{margin-bottom:16px;}
	.yanzheng>div{position:absolute;padding:0 14px;margin:5px 0;border-left:1px solid #ddd;right:0;top:0;height:30px;line-height:30px;color:#fff;}
	/*-- 验证码 --*/
	/*-- 公交卡号 --*/
	.gonjiao{margin-bottom:40px;}
	/*-- 公交卡号 --*/
	/*-- 记录 --*/
	.jilu_box{position:fixed;padding:10px;display:block;right:0;bottom:0;color:#fff;}
	.tuichu_box{position:fixed;padding:10px;display:block;left:0;bottom:0;color:#fff;}
	/*-- 记录 --*/
</style>
</head>

<body>
	<form name="show" class="content_box">
		<ul>
			<li class="sj_chaxun">
				<div></div>
				<div class="cha_xun" onclick="serch()">查询</div>
				<input type="text" name="phone" placeholder="输入手机号" oninput="this.value= value.replace(/\D/g,'')">
			</li>
			<br>
			<li class="leiji_xf" style="display:none;">
				<p>累计消费</p>
				<p><i>￥<span id="lj_xiaofei">0</span>元</i></p>
				<img src="__HOME__/img/jingqi-bg.png" alt="">
			</li>
			<li class="yanzheng">
				<div id="hq_yzm" disable="disable">发送验证码</div>
				<input type="text" name='code' placeholder="请输入验证码">
			</li>
			<li class="gonjiao"><input type="text" name="icnumber" placeholder="请输入公交卡号"></li>
			<li><button type="button" class="bnt">发 放</button></li>
		</ul>
	</form>
	<a href="{:url('detail')}" class="jilu_box">发放记录</a>
	<a href="{:url('outlogin')}" class="tuichu_box">退 出</a>
</body>
<script src="__HOME__/js/jquery-3.3.1.js"></script>

<script>

	var sMobile,recode,uid,enable;

	document.show.phone.value = '';
	function serch(){

		sMobile = document.show.phone.value;

		if(sMobile == ''){
			layer.open({ content: '请输入手机号' ,skin: 'msg' ,time: 2});
			return false;
		}
		 if(!(/^1[3|4|5|8][0-9]\d{8}$/.test(sMobile))){

		  	layer.open({ content: '手机号不正确' ,skin: 'msg' ,time: 2});

		  	document.show.phone.value = '';

		  	document.show.phone.focus();

		  	return false;
		 }
		 if(enable == 2){
		 	layer.open({ content: '您已参与过，谢谢！' ,skin: 'msg' ,time: 2});
		 	return false;
		 }
		 $.post('/index/check/info',{phone:sMobile},function(msg){


		 	if($.isNumeric(msg[0])){
		 		uid = msg[0];
		 		$('#lj_xiaofei').text(msg[1]);
		 		$('.leiji_xf').show();
		 		$("#hq_yzm").attr('disable','');
		 		enable = 1;
		 	}else if(msg == 'join'){

		 		layer.open({ content: '您已参与过，谢谢！' ,skin: 'msg' ,time: 2});
		 		$('button.bnt').text('已参与过');
		 		$('button.bnt').removeClass('bnt');
		 		enable = 2;
		 	}else{

		 		layer.open({ content: '无此用户信息' ,skin: 'msg' ,time: 2});
		 		return false;

		 	}
		 })

	}
	
	/* 读秒 */
	$("#hq_yzm").click(function(){
		/*me*/
		if(!enable || (enable == 2)){
			layer.open({ content: '请先进行查询' ,skin: 'msg' ,time: 2});
			return false;
		}
		if(!sMobile) return false;
		$.post('/index/check/yzm',{phone:sMobile},function(msg){
			if(msg){
				recode = msg;
			}else{
				recode = null;
			}
			
		})
		/*me*/
		var aa = $(this).text();
		if(aa === "发送验证码"){

			$(this).text("还剩60s");
			dao_js();
		}
	})

	function dao_js(){
		var a = 60;
		var d_t = setInterval(function(){
			a--;
			if(a >= 0){
				var d = "还剩" + a + "s"
				$("#hq_yzm").text(d);
			}else{
				clearInterval(d_t);
				$("#hq_yzm").text("获取验证码")
			}
		},1000)
	}
	/*
		1. 点击发放，更新用户活动id
	 */
	$('.bnt').click(function(){

		
		var code = document.show.code.value;
		var icnumber = document.show.icnumber.value;

		if(!recode){
			layer.open({ content: '请先获取验证码' ,skin: 'msg' ,time: 2});
			document.show.code.value = '';
			return false;
		}
		if(!code){
			layer.open({ content: '请先输入验证码' ,skin: 'msg' ,time: 2});
			return false;
		}

		if( !icnumber ){

			layer.open({ content: '请输入公交卡号' ,skin: 'msg' ,time: 2});
	 		return false;
		}
		
		if(parseInt(recode) !== parseInt(code)){

			layer.open({ content: '验证码错误' ,skin: 'msg' ,time: 2});
	 		return false;
		}

		var _this = this;
		$.post('/index/check/updateact',{u:uid,phone:sMobile,cnum:icnumber},function(msg){
			if(msg){

				layer.open({ content: '成功发放' ,skin: 'msg' ,time: 2});
				$(_this).text('已发过');
			}else{

				layer.open({ content: '发放失败，请联系管理员' ,skin: 'msg' ,time: 2});
			}
		})
	});
</script>
<script src="__HOME__/js/layer.js"></script>
</html>
